<template>
  <a-modal
    @update:open="emit('update:open', $event)"
    title="运输配置"
    @ok="onOk"
    @cancel="onCancel"
  >
    <a-form ref="formRef" :model="formState" :labelCol="{ span: 5 }">
      <a-form-item label="最晚任务下发时间" name="dispatchTime" required>
        <a-input v-model:value="formState.dispatchTime" suffix="小时前" style="width: 300px" />
      </a-form-item>
      <a-form-item label="优先匹配方式" name="dispatchMethod" required>
        <a-select v-model:value="formState.dispatchMethod" allowClear placeholder="请选择一种方式">
          <a-select-option v-for="item in dispatchMethod" :key="item.id" :value="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
// 新增车辆
import { reactive, ref } from 'vue'
import { postDispatchConfigurationManagerAPI } from '@/services/configurationManager.js'
import { message } from 'ant-design-vue'

// 是否打开模态框-用于双向绑定
const emit = defineEmits(['update:open', 'ok'])

// 表单组件实例
const formRef = ref()

// 表单字段
const formState = reactive({
  /** 任务时间 */
  dispatchTime: 3,
  /** 应载重量 */
  dispatchMethod: 2,
})
// 下拉选项
const dispatchMethod = ref([
  {
    id: 1,
    name: '转运次数最少',
  },
  {
    id: 2,
    name: '成本最低',
  },
])

// 确定按钮
const onOk = async () => {
  // 新增运输配置
  console.log(formState)
  await postDispatchConfigurationManagerAPI(formState)
  message.success('操作成功')
  // 重置表单字段
  formRef.value.resetFields()
  // 关闭模态框
  emit('update:open', false)
  // 通知父组件，刷新表格数据
  emit('ok')
}

// 取消
const onCancel = () => {
  // 重置表单字段
  formRef.value.resetFields()
}
</script>
